<template>
  <view class="login" style="background-image: url('../../static/bg-home.png')">
    <view class="head">
      <image class="logo" src="../../static/tian66-logo.png" alt="" srcset="" />
    </view>
    <view class="form-box">
      <view class="row-input">
        <input
          v-model="formData.username"
          maxlength="11"
          placeholder="用户名或手机号"
        />
      </view>
      <view class="row-input">
        <input
          v-model="formData.password"
          :password="showPassword"
          maxlength="18"
          placeholder="密码"
        />
        <view @click="changePassword">
          <u-icon :name="passwordIcon" size="28"></u-icon>
        </view>
      </view>

      <view class="foot-btn-wrapper">
        <view @click="backHandle()" class="back-btn foot-btn"> 返回 </view>
        <view @click="actionLogin(formData)" class="login-btn foot-btn">
          登录
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useStore } from "@/hooks/useStore";
import { onShow } from "@dcloudio/uni-app";
import { reactive, ref, computed } from "vue";
const { actionLogin } = useStore();
const formData = reactive({
  username: "",
  password: "",
});
onShow(() => {
  uni.hideHomeButton();
});
const showPassword = ref(true);
const passwordIcon = computed(() => {
  return showPassword.value ? "eye-fill" : "eye-off";
});
function changePassword() {
  showPassword.value = !showPassword.value;
}
function backHandle() {
  // uni.navigateBack();
  uni.switchTab({
    url: '/pages/index/index'
  })
}
</script>

<style lang="scss">
.login {
  min-height: 100vh;
  width: 100vw;
  background-position: 100% 100%;
  .head {
    padding: 8vh 0;
    margin: auto;
    display: flex;
    justify-content: center;
    .logo {
      border-radius: 8rpx;
      width: 400rpx;
      height: 400rpx;
    }
  }

  .form-box {
    padding: 0rpx 80rpx 60rpx 80rpx;
    border-radius: 20rpx;
    background-color: #ffffff;
    width: 90vw;
    margin: 0 auto;

    .tab-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
      color: #929293;
      font-weight: bold;

      .row-tab {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        font-weight: bold;
        font-size: 35rpx;
        width: 50%;
        height: 100%;

        .tab-active {
          color: #4d88f8;
        }

        .thing {
          margin-top: 20rpx;
          width: 50rpx;
          height: 6rpx;
          background-color: #3884f6;
        }
      }
    }

    .row-input {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 50rpx;
      font-size: 30rp;
      height: 100rpx;
      border-bottom: 1rpx solid #cfcfd0;

      input {
        flex: 1;
      }

      .code {
        display: flex;
        justify-content: flex-end;
        font-weight: bold;
        color: #0b77f7;
        width: 200rpx;
        font-size: 26rpx;
      }
    }

    .foot-btn-wrapper {
      margin-top: 80rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100rpx;
      letter-spacing: 10rpx;
      font-size: 30rpx;
    }
    .foot-btn {
      border-radius: 10rpx;
      height: 80rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .login-btn {
      background: linear-gradient(to right, #0a7df7, #0f62f3);
      color: #ffffff;
      width: 65%;
    }
    .back-btn {
      background: #fff;
      color: linear-gradient(to right, #0a7df7, #0f62f3);
      border: solid 1px #0f62f3;
      color: #0f62f3;
      width: 30%;
    }

    .menu-link {
      position: fixed;
      left: 80rpx;
      right: 80rpx;
      bottom: 50rpx;
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      font-weight: bold;
    }
  }
}
</style>
